<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../lib/vue.js"></script>
</head>
<body>
    <div id="box">
        {{count}}
        <button @click="handleAdd1">add1-函数名</button>
        <!-- click.stop可以阻止事件冒泡 -->
        <button @click.stop="handleAdd2($event,2)">add2-函数表达式</button>
        <a href="www.baidu.com" @click.prevent="prevent">跳转</a>
        <!-- 一个用户只能抽奖一次 -->
        <button @click.once=“hello”>抽奖</button>
        <input type="text" @keyup.enter="handleKeyip">
    </div>

    <script type="text/javascript">
        new Vue({
            el: "#box",
            data: {
                count: 0
            },
            methods: {
                handleAdd1() {
                    this.count++;
                },
                handleAdd2(evt,data) {
                    console.log(evt)
                    this.count += data;
                },
                prevent() {
                    console.log("阻止跳转")
                },
                hello() {
                    console.log("抽奖")
                },
                handleKeyip() {
                    console.log("键盘回车才行")
                }
            }
        })
    </script>
</body>
</html>